.wrap {
  width: 320rpx;
  height: 320rpx;

  &.small {
    width: 120rpx;
    height: 120rpx;
    overflow: hidden;

    .loading {
      transform: scale(0.375);
      transform-origin: 0 0;
    }
  }
}

.loading {
  width: 320rpx;
  height: 320rpx;
  position: relative
}

.cycle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: spinner 10s linear infinite;

  .cycle-img {
    width: 100%;
    height: 100%;
  }

  .fish-img {
    width: 10%;
    height: 10%;
    position: absolute;
    top: -3.75%;
    left: 46.875%;
    transform: rotate(-90deg);
  }
}

.cat {
  // based on wrap
  width: 75%; // 240rpx
  height: 75%; // 240rpx
  position: relative;
  top: 12.5%;
  left: 12.5%;

  .bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #FFD974;
    overflow: hidden;
  }

  .body {
    width: 100%;
    height: 100%;
    position: relative;

    .body-img {
      width: 100%;
      height: 100%;
    }

    .eye-main {
      // based on .cat: 240rpx
      position: absolute;
      top: 41.666%;
      left: 33.6%;
      width: 32.083%;
      height: 11.666%;

      .eye-bg-img {
        width: 100%;
        height: 100%;
        animation: blink 5s infinite;
        transform-origin: center;
        position: absolute;
      }

      .eye-img {
        // based on .eyeMain: 77rpx * 28rpx
        width: 72.72%;
        height: 42.857%;
        position: absolute;
        top: 33%;
        left: 15%;
        animation: gaze 10s linear infinite;
      }
    }
  }
}



&.enter {
  .cat .bg {
    animation: scale 400ms ease-in-out forwards;
  }

  .cat .body {
    animation: slide 600ms ease-in-out forwards;
  }

  .cat .cycle {
    animation: fade 400ms ease-in-out forwards;
  }
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slide {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  // blink twice, scale Y
  90%, 95% {
    transform: scaleY(1);
  }

  92.5%, 97.5% {
    transform: scaleY(0);
  }
}

@keyframes gaze {
  // 1/4 of the time, gaze to the right
  22% {
    transform: translateX(0);
  }

  24% {
    transform: translateX(10%);
  }

  // focus on down
  54% {
    transform: translateY(40%);
  }

  // back
  56% {
    transform: translateY(0);
  }
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
